<script setup lang="ts">
import { useCartStore } from '@/stores/cart'
import type { Spu } from '@/api/mall/product/spu'
import { useRouter } from 'vue-router'

const props = defineProps<{ item: Spu }>()
const cart = useCartStore()
const router = useRouter()

function add() {
  cart.add(props.item, props.item.skus?.[0] || null, 1)
}
function view() {
  router.push({ name: 'detail', params: { id: props.item.id } })
}
</script>

<template>
  <div class="card">
    <img :src="item.picUrl || item.sliderPicUrls?.[0]" alt="" />
    <div class="info">
      <div class="name">{{ item.name }}</div>
      <div class="price">￥{{ (item.price || item.skus?.[0]?.price || 0).toFixed(2) }}</div>
    </div>
    <div class="actions">
      <button @click="view">查看详情</button>
      <button @click="add">加入购物车</button>
    </div>
  </div>
  
</template>

<style scoped>
.card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.card img { width: 100%; height: 160px; object-fit: cover; background: #fafafa; }
.info { padding: 8px 10px; }
.name { font-size: 14px; line-height: 1.4; height: 40px; overflow: hidden; }
.price { color: #e22; font-weight: 600; margin-top: 6px; }
.actions { display: flex; gap: 8px; padding: 8px 10px; }
.actions button { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; background: #f7f7f7; }
</style>